<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="css/themes/icon.css"/>
    <link rel="stylesheet" href="css/themes/color.css"/>
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<table id="weixin_roles_tree"></table>
<div style="display: none">
    <div id="menus_contmenu" class="easyui-menu" data-options="onClick:MymenuHandler" style="width:120px;">
        <div data-options="name:'new'">新建菜单</div>
        <div data-options="name:'new2',iconCls:'icon-save'">新建子菜单</div>
        <div class="menu-sep"></div>
        <div data-options="name:'exit'">退出</div>
    </div>
</div>
<script type="text/javascript">
    var $weixin_roles_tree=$('#weixin_roles_tree');
    var editbtn=$("<a href='javascript:editmenu()'>编辑</a>").linkbutton({iconCls:'icon-search',plain:true}).prop('outerHTML');
    var delbtn=$("<a href='javascript:delmenu()'>删除</a>").linkbutton({iconCls:'icon-search',plain:true}).prop('outerHTML');
    var roleindex=-1;
    var $menus_contmenu=$('#menus_contmenu');
    
    $weixin_roles_tree.treegrid({
        idField:'id',
        treeField:'text',
        url:'menu/allmenus.json',
        saveUrl:'menu/api?method=add',
       	delUrl:'menu/api?method=del',
       	editUrl:'menu/api?method=update',
       	pagination:true,
        columns: [
            [
                {field: 'ck', checkbox: true},
                {title: '菜单名称', field: 'text', width: 150, editor: {type: 'textbox', options: {required: true}}},
                {title: '菜单图标', field: 'iconCls', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {title: '地址', field: 'url', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {field: 'st', title: '状态', editor: {type: 'checkbox', options: {on: 'true', off: 'false'}}},
                {field: 'description', title: '描述', width: 180,editor: {type: 'textbox', options: {required: true}}},
                {field: 'action', title: '是否动作', width: 80,editor: {type: 'checkbox', options: {on: 'true', off: 'false'}}},
                {title: '权限', field: 'role', width: 80, editor: {type: 'textbox', options: {required: true}}},
                {title: '操作', field: 'btn', width: 200,formatter:function(){
                    return editbtn+delbtn;
                }}
            ]
        ],
        onBeforeEdit:function(row){
            $weixin_roles_tree.treegrid('options').edititem.push(row.id);
        },
        onContextMenu:function(e, row){
            e.preventDefault();
            //console.log(row);
            $menus_contmenu.menu('show', {
                left: e.pageX,
                top: e.pageY
            });
            $menus_contmenu.menu('options').row=row;

        },
        toolbar:[
            {
                iconCls:'icon-add',
                text:'添加',
                handler:function(){
                    var node=$weixin_roles_tree.treegrid('getSelected');
                    if(node){
                    	$weixin_roles_tree.treegrid('append', {
                        	before: node.id,
                            data: [{
                                "id":roleindex--,
                                "text": "新节点"+roleindex+1,
                                "iconCls": "icon-save",
                                "url": "e.html"
                            }]
                        });
                        $weixin_roles_tree.treegrid('beginEdit',roleindex+1);
                        }
                    }
                    
            },
            {
                iconCls:'icon-save',
                text:'接受改变',
                handler:function(){
                    var options=$weixin_roles_tree.treegrid('options');
                    $.each(options.edititem,function(i,n){
                        $weixin_roles_tree.treegrid('endEdit',n);
                    });
                    options.edititem=[];

                }
            },
            {
                iconCls:'icon-save',
                text:'保存',
                handler:function(){
                	$weixin_roles_tree.treegrid('SaveData');
                	/* var options=$weixin_roles_tree.treegrid('options');
                    var addrow=$weixin_roles_tree.treegrid('getChanges','inserted');
                    var delrow=$weixin_roles_tree.treegrid('getChanges','deleted');
                    var updaterow=$weixin_roles_tree.treegrid('getChanges','updated');
                    if(addrow.length>0){
                    	$.post(options.insertUrl,JSON.stringify(addrow),function(data){
                    		showMsg(0,'success');
                    	},'json');
                    }
                    if(updaterow.length>0){
                        $.post(options.updateUrl,JSON.stringify(updaterow),function(data){

                            $weixin_roles_tree.treegrid('load');
                            showMsg(0,'success');
                        },'json');
                    }
 */

                    /*if(delrow.length>0){
                        var ids=[];
                        $.each(delrow,function(i,n){
                            ids.push(n.id);
                        });
                        $.post(options.delUrl,{ids:ids.join(',')},function(data){
                            showMsg(0,'success');
                        },'json');
                    }*/
                    console.log('保存');
                }
            },
            {
                iconCls:'icon-cancel',
                text:'取消更改',
                handler:function(){
                	var options=$weixin_roles_tree.treegrid('options');
                	options.edititem=[];
                    $weixin_roles_tree.treegrid('rejectChanges');
                }
            },
            {
                iconCls:'icon-remove',
                text:'删除',
                handler:function(){
                	
                    var nodes=$weixin_roles_tree.treegrid('getChecked');
                    if(nodes){
                    	$.messager.confirm('提示', '确认删除吗？', function(r){
                    		if (r){
                    			var ids=[];
                                $.each(nodes,function(i,n){
                                    ids.push(n.id);
                                });
                                $.post(options.delUrl,{ids:ids.join(',')},function(data){
                                    showMsg(0,'success');
                                },'json');
                    		}
                    	});
                    }
                    
                }
            }
        ]
    });
    function MymenuHandler(menu){
        //console.log(menu);
        //console.log('==============================================');
        var row=$menus_contmenu.menu('options').row;
        switch (menu.name)
        {
            case 'new':
                $weixin_roles_tree.treegrid('append', {
                    parent:row._parentId,
                    data: [{
                        "id":roleindex--,
                        "text": "新节点"+roleindex+1,
                        "iconCls": "icon-save",
                        "url": "e.html"
                    }]
                });
                $weixin_roles_tree.treegrid('beginEdit',roleindex+1);
                break;
            case 'new2':
                $weixin_roles_tree.treegrid('append', {
                    parent:row.id,
                    data: [{
                        "id":roleindex--,
                        "text": "新节点"+roleindex+1,
                        "iconCls": "icon-save",
                        "url": "e.html"
                    }]
                });
                $weixin_roles_tree.treegrid('beginEdit',roleindex+1);
                break;
            default:
        }
    }
    function editmenu(){
        var row=$weixin_roles_tree.treegrid('getSelected');
        $weixin_roles_tree.treegrid('beginEdit',row.id);
    }
    function delmenu(){
        var row=$weixin_roles_tree.treegrid('getSelected');
        var delurl=$weixin_roles_tree.treegrid('options').delUrl;
        $.get(delurl,{ids:row.id},function(data){
            showMsg(0,'success');
            $weixin_roles_tree.treegrid('load');
        },'json');
    }
</script>
</body>
<script type="text/javascript">
    alert("init");
</script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</html>